<template>
  <div class="split-pane-page-wrapper">
    <split-pane v-model="offset" @on-moving="handleMoving">
      <div slot="left" class="pane left-pane">
        <split-pane v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
          <div slot="top" class="pane top-pane"></div>
          <div slot="bottom" class="pane bottom-pane"></div>
          <div slot="trigger" class="custom-trigger">
            <icons class="trigger-icon" :size="22" type="resize-vertical" color="#fff"/>
          </div>
        </split-pane>
      </div>
      <div slot="right" class="pane right-pane"></div>
    </split-pane>
  </div>
</template>

<script>
  import SplitPane from '_c/split-pane'
  import Icons from '_c/icons'

  export default {
    name: 'split_pane_page',
    components: {
      SplitPane,
      Icons
    },
    data () {
      return {
        offset: 0.6,
        offsetVertical: '250px'
      }
    },
    methods: {
      handleMoving (e) {
        console.log(e.atMin, e.atMax)
      }
    }
  }
</script>

<style lang="less">
  .center-middle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .split-pane-page-wrapper {
    height: 600px;
    .pane {
      width: 100%;
      height: 100%;
      &.left-pane {
        background: sandybrown;
      }
      &.right-pane {
        background: palevioletred;
      }
      &.top-pane {
        background: sandybrown;
      }
      &.bottom-pane {
        background: palevioletred;
      }
    }
    .custom-trigger {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #000000;
      position: absolute;
      .center-middle;
      box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
      i.trigger-icon {
        .center-middle;
      }
    }
  }
</style>
